<template>
<div>
 Hello World!
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <div ref="chart" style="width:100%;height:376px"></div>
</div>
</template>

<script>
// 引入基本模板

// 引入柱状图组件
require('echarts/lib/chart/pie')
// 引入饼图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default{
  data: function () {
    return {
      input: '这是一个element-ui的输入标签'
    }
  },
  mounted () {
    this.getEchartData()
  },
  methods: {
    getEchartData () {
      // let echarts = require('echarts/lib/echarts')
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: '目标文件类型图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: [
                {
                  value: 1048,
                  name: '军事目标',
                  itemStyle: {
                    color: '#ee6666'
                  }
                },
                {
                  value: 735,
                  name: '工业目标',
                  itemStyle: {
                    color: '#91cc75'
                  }
                },
                {
                  value: 580,
                  name: '交通目标',
                  itemStyle: {
                    color: '#fac858'
                  }
                },
                {
                  value: 484,
                  name: '城市目标',
                  itemStyle: {
                    color: '#2455a4'
                  }
                },
                {
                  value: 300,
                  name: '其它',
                  itemStyle: {
                    color: '#73c0de'
                  }
                }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function () {
            myChart.resize()
          })
        })
      }
    }
  }
}
</script>
